<%--
  Created by IntelliJ IDEA.
  User: 15646
  Date: 2024/6/17
  Time: 15:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .sidebar {
            width: 250px;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #343a40;
            color: white;
            padding-top: 20px;
        }
        .sidebar a {
            padding: 10px 15px;
            text-decoration: none;
            font-size: 18px;
            color: white;
            display: block;
        }
        .sidebar a:hover {
            background-color: #575d63;
        }
        .content {
            margin-left: 250px;
            padding: 20px;
        }
        .header {
            background-color: #f8f9fa;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            margin: 0;
        }
        .header .user-info {
            display: flex;
            align-items: center;
        }
        .header .user-info span {
            margin-right: 10px;
        }
        .table-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="sidebar">
    <h2 class="text-center">酒店后端管理</h2>
    <a href="#">会员管理</a>
    <a href="#">订单管理</a>
    <a href="#">分类管理</a>
    <a href="#">城市联动</a>
    <a href="#">管理员管理</a>
    <a href="#">系统统计</a>
    <a href="#">图标字体</a>
    <a href="#">其它页面</a>
    <a href="#">layui第三方组件</a>
</div>

<div class="content">
    <div class="header">
        <h1>订单列表</h1>
        <div class="user-info">
            <span>admin</span>
            <a href="#" class="btn btn-outline-secondary btn-sm">前台首页</a>
        </div>
    </div>

    <div class="table-container">
        <form action="searchOrders" method="get" class="form-inline mb-3">
            <label for="startDate" class="mr-2">开始日期</label>
            <input type="date" id="startDate" name="startDate" class="form-control mr-2">
            <label for="endDate" class="mr-2">截止日期</label>
            <input type="date" id="endDate" name="endDate" class="form-control mr-2">
            <label for="paymentMethod" class="mr-2">支付方式</label>
            <select id="paymentMethod_" name="paymentMethod" class="form-control mr-2">
                <option value="">请选择</option>
                <option value="alipay">支付宝</option>
                <option value="wechat">微信</option>
                <option value="other">其他方式</option>
            </select>
            <label for="orderStatus" class="mr-2">订单状态</label>
            <select id="" name="orderStatus" class="form-control mr-2">
                <option value="">请选择</option>
                <option value="confirmed">待确认</option>
                <option value="shipped">未发货</option>
                <option value="paid">已支付</option>
            </select>
            <input type="text" name="orderNumber" placeholder="请输入订单号" class="form-control mr-2">
            <button type="submit" class="btn btn-primary">查询</button>
        </form>

        <div class="mb-3">
            <button class="btn btn-danger">批量删除</button>
            <button class="btn btn-success" data-toggle="modal" data-target="#addOrderModal">添加</button>
        </div>

        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"></th>
                <th>顾客姓名</th>
                <th>身份证</th>
                <th>性别</th>
                <th>电话</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="order" items="${orders}">
                <tr>
                    <td><input type="checkbox" name="orderId" value="${order.id}"></td>
                    <td>${order.orderNumber}</td>
                    <td>${order.receiver}</td>
                    <td>${order.totalAmount}</td>
                    <td>${order.payableAmount}</td>
                    <td>${order.orderStatus}</td>
                    <td>${order.paymentStatus}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                <li class="page-item"><a class="page-link" href="#"><<</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">>></a></li>
            </ul>
        </nav>
    </div>
</div>

<!-- 添加订单模态框 -->
<div class="modal fade" id="addOrderModal" tabindex="-1" aria-labelledby="addOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addOrderModalLabel">添加顾客</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form  id="addOrderForm" action="addOrder" method="post">
                    <div class="form-group">
                        <label for="orderNumber">订单编号</label>
                        <input type="text" class="form-control" id="orderNumber" name="orderNumber" required>
                    </div>
                    <div class="form-group">
                        <label for="receiver">收货人</label>
                        <input type="text" class="form-control" id="receiver" name="receiver" required>
                    </div>
                    <div class="form-group">
                        <label for="totalAmount">总金额</label>
                        <input type="number" class="form-control" id="totalAmount" name="totalAmount" required>
                    </div>
                    <div class="form-group">
                        <label for="payableAmount">应付金额</label>
                        <input type="number" class="form-control" id="payableAmount" name="payableAmount" required>
                    </div>
                    <div class="form-group">
                        <label for="orderStatus">订单状态</label>
                        <select id="orderStatus" name="orderStatus" class="form-control" required>
                            <option value="待确认">待确认</option>
                            <option value="已支付">已支付</option>
                            <option value="未发货">未发货</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="paymentStatus">支付状态</label>
                        <select id="paymentStatus" name="paymentStatus" class="form-control" required>
                            <option value="未支付">未支付</option>
                            <option value="已支付">已支付</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="shippingStatus">发货状态</label>
                        <select id="shippingStatus" name="shippingStatus" class="form-control" required>
                            <option value="未发货">未发货</option>
                            <option value="已发货">已发货</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="paymentMethod">支付方式</label>
                        <select id="paymentMethod" name="paymentMethod" class="form-control" required>
                            <option value="支付宝">支付宝</option>
                            <option value="微信">微信</option>
                            <option value="其他方式">其他方式</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" form="addOrderForm">提交</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script>
    // JavaScript to handle select all checkboxes
    document.getElementById('selectAll').addEventListener('click', function() {
        var checkboxes = document.getElementsByName('orderId');
        for (var checkbox of checkboxes) {
            checkbox.checked = this.checked;
        }
    });
</script>
</body>
</html>
